// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';
import { Echarts, echarts } from 'react-native-secharts';
import moment from 'moment'

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { deviceHeartRateDetail } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RnFlatList } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, borderBottom, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class RateDetail extends Component {


  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      detail: {
        data: [],
        dmData: {
          code: '',
          date: '',
          dm: '',
          status: ''
        }
      },
    }
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步的任务...
      this.showLoadingData()
    });
  }

  showLoadingData(options) {
    this.loading = Toast.loading('加载中', 0)
    this.loadingData(options).then(res => {
      this.setState({
        detail: res[0].data
      })
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  loadingData(options) {
    const { id } = this.props
    return Promise.all([deviceHeartRateDetail({ id })])
  }


  render() {
    const { refreshing, detail: { data, dmData } } = this.state
    let newBodyData = data.filter(item => item.code == 3).map((item, index) => {
      return {
        x: moment(item.date).format('HH:mm:ss'),
        y: item.dm,
      }
    })
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="心率图"
          back={true}
        />
        {data && data.length > 0 && (
          <View style={{}}>
            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, padding: 15 }}>{data[data.length - 1].status}</Text>
            {newBodyData.length > 1 && (
              <Echarts
                option={{
                  // Make gradient line here
                  visualMap: [{
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                  }, {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 1,
                    dimension: 0,
                    min: 0,
                  }],
                  xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: newBodyData.map((item) => item.x)
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [{
                    data: newBodyData.map((item) => item.y),
                    type: 'line',
                  }]
                }}
                height={400}
              />
            )}

          </View>
        )}
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(RateDetail))
